<template>
    <div>
        <VueDragResize
            :isActiyve="true"
            :w="175"
            :h="400"
            v-on:resizing="resize"
            v-on:dragging="resize"
            :isResizable="false"
            :parentLimitation="true"
            :parentW="w"
            :parentH="h"
            :x="280"
            :y="47"
            style="background-color: rgba(255, 255, 255, 0.2)"
        >

            <el-row style="background-color: rgba(255, 255, 255, 0.2); z-index: 100">
                <el-table
                    :data="tctList"
                    style="
                            width: 100%;
                            background-color: rgba(255, 255, 255, 0.2);
                        "
                    size="mini"
                    ref="AiTct"
                    :highlightCurrentRow="true"
                    @current-change="handleCurrentChange"
                    :header-cell-style="{
                            'background-color': 'rgba(255,255,255,0.6)',
                            cursor: 'pointer',
                            color: '#777C7C',
                            'font-weight': '400',
                            'font-size': '15px',
                            'text-align': 'center',
                        }"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="50"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="类型"
                        align="center"
                        width="75"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="count"
                        label="数量"
                        align="center"
                        width="50"
                    >
                    </el-table-column>
                </el-table>

            </el-row>
        </VueDragResize>
    </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'

export default {
  props: ['tctPartOfGroup'],
  name: 'AiTct',

  components: {
    VueDragResize
  },

  data() {
    return {
      width: 0,
      height: 0,
      top: 0,
      w: document.documentElement.clientWidth,
      h: document.documentElement.clientHeight - 50,
      left: 0,
      tctList: []
    }
  },
  computed: {},
  mounted() {
    Object.keys(this.tctPartOfGroup).forEach(item => {
      let arrOne = this.tctPartOfGroup[item]
      if (arrOne.length > 0) {
        this.tctList.push({
          name: arrOne[0].partOfGroup,
          count: arrOne.length
        })
      }
    })
    this.$refs.AiTct.setCurrentRow(this.tctList[0])
  },
  methods: {
    resize(newRect) {
      this.width = newRect.width
      this.height = newRect.height
      this.top = newRect.top
      this.left = newRect.left
    },
    handleCurrentChange(val) {
      if (!!val) {
        this.$emit('click-part-0f-group', val.name)
      }
    }
  }
}
</script>
<style>
.text-style {
  padding: 10px;
  border-bottom: 1px solid #000;
}
.text-style .count {
  float: right;
}
.text-style:hover {
  cursor: pointer;
  background-color: #ccc;
}
</style>
